﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩注册</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/reg.css">
</head>
<body>
    <div class="form">
        <h2>
            <span>注册</span>
        </h2>

        <div class="form-area">
            <!-- 昵称 -->
            <div class="form-item">
                <input type="text" placeholder="昵称">
                <div class="error">
                    该昵称已被他人占用
                </div>
            </div>
            
            <!-- 密码 -->
            <div class="form-item">
                <input type="password" placeholder="密码（6-16个字符组成，区分大小写）">
            </div>
            
            <!-- 地区 + 手机号 -->
            <div class="form-item">
                <div class="select clearfix">
                    <!-- 地区 -->
                    <div class="select-item">
                        <div class="title">
                            中国大陆
                        </div>
                        <ul>
                            <li>Lorem.</li>
                            <li class="selected">中国大陆</li>
                            <li>Necessitatibus.</li>
                            <li>Consequuntur!</li>
                            <li>Eos.</li>
                            <li>Repellendus.</li>
                            <li>Numquam!</li>
                            <li>Iste!</li>
                            <li>Libero!</li>
                            <li>Accusantium.</li>
                            <li>Accusantium.</li>
                            <li>Impedit.</li>
                            <li>Distinctio?</li>
                            <li>Voluptatum.</li>
                            <li>Corporis.</li>
                            <li>Nihil.</li>
                            <li>Voluptate.</li>
                            <li>Iure!</li>
                            <li>Totam.</li>
                            <li>Eveniet.</li>
                            <li>Labore.</li>
                            <li>Dignissimos.</li>
                            <li>Fugiat.</li>
                            <li>Omnis?</li>
                            <li>Accusamus?</li>
                            <li>Expedita?</li>
                            <li>Vel.</li>
                            <li>Maxime!</li>
                            <li>Molestias.</li>
                            <li>Labore.</li>
                            <li>Nobis?</li>
                            <li>Dolorem.</li>
                            <li>Quas?</li>
                            <li>Veritatis?</li>
                            <li>Ipsum.</li>
                            <li>Dolorem.</li>
                            <li>Id?</li>
                            <li>Quo.</li>
                            <li>Veritatis.</li>
                            <li>Officiis.</li>
                            <li>Consequatur?</li>
                            <li>Est?</li>
                            <li>Accusantium?</li>
                            <li>Nisi.</li>
                            <li>Ducimus!</li>
                            <li>Fugiat.</li>
                            <li>Enim?</li>
                            <li>Architecto.</li>
                            <li>Beatae?</li>
                            <li>Voluptas?</li>
                            <li>Vitae!</li>
                            <li>Nostrum.</li>
                            <li>Tempora!</li>
                            <li>Non?</li>
                            <li>Voluptatibus?</li>
                            <li>Magnam?</li>
                            <li>Aut?</li>
                            <li>Exercitationem.</li>
                            <li>Consequatur.</li>
                            <li>Incidunt.</li>
                            <li>Amet.</li>
                            <li>Perferendis!</li>
                            <li>Laudantium.</li>
                            <li>Quia.</li>
                            <li>Accusantium.</li>
                            <li>Eius!</li>
                            <li>Dolores.</li>
                            <li>Exercitationem?</li>
                            <li>Ab?</li>
                            <li>At.</li>
                            <li>Necessitatibus.</li>
                            <li>Possimus?</li>
                            <li>Ad!</li>
                            <li>Maxime!</li>
                            <li>Fugit!</li>
                            <li>Cum!</li>
                            <li>Nobis.</li>
                            <li>Doloremque?</li>
                            <li>Officiis!</li>
                            <li>Earum!</li>
                            <li>Nihil.</li>
                            <li>Soluta!</li>
                            <li>Unde?</li>
                            <li>Sed.</li>
                            <li>Doloremque!</li>
                            <li>Obcaecati.</li>
                            <li>Ullam.</li>
                            <li>Dolor.</li>
                            <li>Perferendis.</li>
                            <li>Ipsam.</li>
                            <li>Voluptates?</li>
                            <li>Autem!</li>
                            <li>Cum!</li>
                            <li>Repellat!</li>
                            <li>Quo!</li>
                            <li>Necessitatibus!</li>
                            <li>Accusantium!</li>
                            <li>Iure!</li>
                            <li>Assumenda.</li>
                            <li>Adipisci?</li>
                        </ul>
                    </div>
                    <!-- 手机号 -->
                    <div class="input">
                        <input type="text" placeholder="填写常用手机号">
                    </div>
                </div>
            </div>

            <!-- 短信验证码 -->
            <div class="form-item">
                <input type="text" placeholder="请输入短信验证码">
                <button type="button" class="btn-sncode">点击获取</button>
            </div>

            <!-- 同意协议 -->
            <div class="readme">
                <label>
                    <input type="checkbox">
                    <span class="checkbox"></span>
                    <span>
                        我已同意
                        <a href="">《哔哩哔哩弹幕网用户使用协议》</a>  
                        和
                        <a href="">《哔哩哔哩隐私政策》</a>  
                    </span>
                </label>
            </div>

            <!-- 注册按钮 -->
            <div class="form-item">
                <button disabled class=" fill">注册</button>
            </div>

            <!-- 提示 -->
            <div class="readme txtright">
                <a href="">已有账号，直接登录&gt;</a>
            </div>
        </div>
    </div>
</body>
</html>